<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>证件照</title>
	<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/photo.css">
</head>
<body>
	<header>
		<a href="" class="demo-icon return">&#xe801;</a>
		<span>证件照</span>
	</header>

	<section>
		<div>
			<span>学生证</span>
			<div class="photo clearfix">
				<div class="left">
					<div class="file">
						<b>点击选择图片</b>
						<input type="file" multiple="" accept="image/*" class="fileElem" onchange="handleFiles(this)">
					</div>
					<div id="fileList">
					</div>
				</div>
						
				<input type="button" value="上传">
			</div>
		</div>
		<div>
			<span>身份证</span>
			<div class="photo clearfix">
				<div class="left">
					<div class="file">
						<b>点击选择图片</b>
						<input type="file" multiple="" accept="image/*" class="fileElem" onchange="handleFiles1(this)">
					</div>
					<div id="fileList1">
					</div>
				</div>
						
				<input type="button" value="上传">
			</div>
			
		</div>
		<div>
			<span>本人手持身份证照</span>
			<div class="photo clearfix">
				<div class="left">
					<div class="file">
						<b>点击选择图片</b>
						<input type="file" class="fileElem" multiple="" accept="image/*"  onchange="handleFiles2(this)">
					</div>
					<div id="fileList2">
					</div>
				</div>
						
				<input type="button" value="上传">
			</div>
		</div>

		<input type="button" value="确定" class="btn">
	</section>
	
	<script type="text/javascript">

		window.URL = window.URL || window.webkitURL;
		var fileList = document.getElementById("fileList");
		    fileList1 = document.getElementById("fileList1");
		    fileList2 = document.getElementById("fileList2");

		function handleFiles(obj) {
			var files = obj.files,
				img = new Image();
			if(window.URL){
				//File API
				  /*alert(files[0].name + "," + files[0].size + " bytes");*/
			      img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
			      img.width = 120;
			      img.onload = function(e) {
			         window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
			      }
			      if(fileList.getElementsByTagName('img').length<1){
			      	fileList.appendChild(img);
			      }
			      else{
			      	fileList.innerHTML="";
			      	fileList.appendChild(img);
			      }
			}else if(window.FileReader){
				//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
				var reader = new FileReader();
				reader.readAsDataURL(files[0]);
				reader.onload = function(e){
					alert(files[0].name + "," +e.total + " bytes");
					img.src = this.result;
					img.width = 120;
			      	fileList.value="";
				    if(fileList.getElementsByTagName('img').length<1){
				    	fileList.appendChild(img);
				    }
				    else{
				    	fileList.innerHTML="";
				    	fileList.appendChild(img);
				    }
				}
			}else{
				//ie
				obj.select();
				obj.blur();
				var nfile = document.selection.createRange().text;
				document.selection.empty();
				img.src = nfile;
				img.width = 120;
				img.onload=function(){
			      alert(nfile+","+img.fileSize + " bytes");
			    }
		      	fileList.value="";
			    if(fileList.getElementsByTagName('img').length<1){
			    	fileList.appendChild(img);
			    }
			    else{
			    	fileList.innerHTML="";
			    	fileList.appendChild(img);
			    }
				//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
			}
		}

		function handleFiles1(obj) {
			var files = obj.files,
				img = new Image();
			if(window.URL){
				//File API
				  /*alert(files[0].name + "," + files[0].size + " bytes");*/
			      img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
			      img.width = 120;
			      img.onload = function(e) {
			         window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
			      }
			      if(fileList1.getElementsByTagName('img').length<1){
			      	fileList1.appendChild(img);
			      }
			      else{
			      	fileList1.innerHTML="";
			      	fileList1.appendChild(img);
			      }
			}else if(window.FileReader){
				//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
				var reader = new FileReader();
				reader.readAsDataURL(files[0]);
				reader.onload = function(e){
					alert(files[0].name + "," +e.total + " bytes");
					img.src = this.result;
					img.width = 120;
			      	fileList1.value="";
				    if(fileList1.getElementsByTagName('img').length<1){
				    	fileList1.appendChild(img);
				    }
				    else{
				    	fileList1.innerHTML="";
				    	fileList1.appendChild(img);
				    }
				}
			}else{
				//ie
				obj.select();
				obj.blur();
				var nfile = document.selection.createRange().text;
				document.selection.empty();
				img.src = nfile;
				img.width = 120;
				img.onload=function(){
			      alert(nfile+","+img.fileSize + " bytes");
			    }
		      	fileList1.value="";
			    if(fileList1.getElementsByTagName('img').length<1){
			    	fileList1.appendChild(img);
			    }
			    else{
			    	fileList1.innerHTML="";
			    	fileList1.appendChild(img);
			    }
				//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
			}
		}

		function handleFiles2(obj) {
			var files = obj.files,
				img = new Image();
			if(window.URL){
				//File API
				  /*alert(files[0].name + "," + files[0].size + " bytes");*/
			      img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径
			      img.width = 120;
			      img.onload = function(e) {
			         window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL
			      }
			      if(fileList2.getElementsByTagName('img').length<1){
			      	fileList2.appendChild(img);
			      }
			      else{
			      	fileList2.innerHTML="";
			      	fileList2.appendChild(img);
			      }
			}else if(window.FileReader){
				//opera不支持createObjectURL/revokeObjectURL方法。我们用FileReader对象来处理
				var reader = new FileReader();
				reader.readAsDataURL(files[0]);
				reader.onload = function(e){
					alert(files[0].name + "," +e.total + " bytes");
					img.src = this.result;
					img.width = 120;
			      	fileList2.value="";
				    if(fileList2.getElementsByTagName('img').length<1){
				    	fileList2.appendChild(img);
				    }
				    else{
				    	fileList2.innerHTML="";
				    	fileList2.appendChild(img);
				    }
				}
			}else{
				//ie
				obj.select();
				obj.blur();
				var nfile = document.selection.createRange().text;
				document.selection.empty();
				img.src = nfile;
				img.width = 120;
				img.onload=function(){
			      alert(nfile+","+img.fileSize + " bytes");
			    }
		      	fileList2.value="";
			    if(fileList2.getElementsByTagName('img').length<1){
			    	fileList2.appendChild(img);
			    }
			    else{
			    	fileList2.innerHTML="";
			    	fileList2.appendChild(img);
			    }
				//fileList.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"+nfile+"')";
			}
		}

	</script>
</body>
</html>